


How to Make WhatsApp Chat on AO3

by ran_a_dom (revabhipraya)



Series: AO3 Chat Skin Tutorial [1]
Category: No Fandom
Genre: Chatting & Messaging, Fanwork Research & Reference Guides, Gen
Language: English
Status: In-Progress
Published: 2018-08-30
Updated: 2018-08-30
Packaged: 2019-07-04 13:15:06
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 1,596
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/15842043
Author URL: https://archiveofourown.org/users/revabhipraya/pseuds/ran_a_dom
Summary: This is a tutorial and live example on how to make WhatsApp Chat on AO3 without using images.





	1. Simple WhatsApp Personal Chat

 

Mom  
online  
Mom  
Yes?  
I'll be home late  
Oh  
Don't make me dinner  
I already have  
Give it to Hannah Ok

* * *

# how to code it?

It's actually quite simple! Since CodenameCarrot and La_Temperanze have made [How to Make iOS Text Messages on AO3](https://archiveofourown.org/works/6434845/chapters/14729722) and phantomdare1 has made the [Android Text Messages](https://archiveofourown.org/works/8631214?style=creator&view_full_work=true) version, I can say this one is easy to make. First, go to your dashboard and click "Skins". Choose "My Work Skin", then "Create Work Skin". But you may add this code to other skin that you have, of course!

If you make a new work skin, then write anything you want in the "Title" box, and start your "CSS" box with the base of the phone:
    
    
    #workskin .phone {
      max-width: 300px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      display: table;
      margin: auto;
    }

Next, you'll have to make the base of the message body:
    
    
    #workskin .messagebody {
      background-image: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png");
      background-repeat: repeat-y;
      background-size: 100%;
      display: table;
    }

That URL is the URL of WhatsApp's default background. Feel free to change it if you want to! Next, we're going to add contact name:
    
    
    #workskin .header {
      min-width: 300px;
      background-color: #075E54;
      background-attachment: fixed;
      background-position: center;
      background-size: 100%;
      color: #FFFFFF;
      font-weight: bold;
      font-size: 1.15em;
      padding-top: .5em;
      padding-bottom: 0.5em;
      margin-bottom: -2em;
      text-align: left;
      text-indent: 55px;
      text-transform: capitalize;
      display: table;
    }

Since the font weight is **bold** , the contact name will automatically be bold. And, since the text transform is set to  **capitalize** , then the contact name's first letter will be capitalized. You can erase this option if you want to.

Next, we'll add some status under the contact name. In WhatsApp, its contents are usually "online" or "typing...". The CSS code:
    
    
    #workskin .status {
      min-width: 300px;
      background-color: #075E54;
      background-attachment: fixed;
      background-position: center;
      background-size: 100%;
      color: #FFFFFF;
      font-size: 0.75em;
      padding-top: 0.25em;
      padding-bottom: 0.75em;
      margin-bottom: -2em;
      text-align: left;
      text-indent: 55px;
      display: table;
    }

Next, we'll add a picture for the contact. Since this is WhatsApp so profile picture is a must! The CSS code:
    
    
    #workskin .avatar {
      content: "";
      width: 40px;
      height: 40px;
      margin: 0.5em;
      background-image: url("https://t3.ftcdn.net/jpg/00/64/67/80/240_F_64678017_zUpiZFjj04cnLri7oADnyMH0XBYyQghG.jpg");
      background-size: 100%;
      border-radius: 100%;
      position: absolute;
      z-index: 1;
    }

The URL is, again, the default profile picture WhatsApp's have. If you want to change it, simply change the URL in your CSS code with the image URL you want!

Next, we'll add the bubble chat! First, we'll add the bubble chat for the first person point of view:
    
    
    #workskin .reply {
      float: right;
      color: #000000;
      margin: 0.4em 1em;
      border-radius: 0.5em 0 0.5em 0.5em;
      padding: 0.25em 15px 0.25em 1em;
      background: #E1FFC7;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .reply::before {
      content: "";
      position: absolute;
      right: -0.5em;
      top: 0;
      width: 0.5em;
      height: 1em;
      border-right: 0.5em solid #E1FFC7;
      border-bottom-right-radius: 0.5em 1em;
    }

Then, we'll add the bubble chat for the second person point of view:
    
    
    #workskin .text {
      float: left;
      color: #000000;
      margin: 0.4em 1em;
      border-radius: 0 0.5em 0.5em 0.5em;
      padding: 0.25em 15px 0.25em 1em;
      background: #FFFFFF;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .text::before {
      content: "";
      position: absolute;
      left: -.5em;
      top: 0;
      width: 0.5em;
      height: 1em;
      border-left: 0.5em solid #FFFFFF;
      border-bottom-left-radius: 0.5em 1em;
    }

You're done with the CSS! Next, go to your "Work Text" and write in the "HTML" instead of "Rich Text". For the example above, just type it like this:
    
    
    <div class="phone">  
    <p class="messagebody">  
    <span class="avatar"></span>  
    <span class="header">Mom</span><br />  
    <span class="status">online</span><br />  
    <span class="reply">Mom</span><br />  
    <span class="text">Yes?</span><br />  
    <span class="reply">I'll be home late</span><br />  
    <span class="text">Oh</span><br />  
    <span class="reply">Don't make me dinner</span><br />  
    <span class="text">I already have</span><br />  
    <span class="reply">Give it to Hannah</span>  
    <span class="text">Ok</span><br />  
    </p></div>

And, TADA! You're finished!

 

Mom  
online  
Mom  
Yes?  
I'll be home late  
Oh  
Don't make me dinner  
I already have  
Give it to Hannah Ok

So this is how you do the CSS to mimic WhatsApp Personal Chat in a simple way. Next, I'll show you how to make this kind of bubble chat:

 

Mom  
online  
Mom  
Where are you?  
I'm home  
But the door's locked

Have fun doing the WhatsApp chat!


	2. Spam Messages, Time, and Check Mark

Mom  
online  
Mom  
Where are you?  
I'm home  
But the door's locked?  
Sorry  
Forgot to tell you that I'm going to the supermarket  
The key's in the masterbox  
Ok

* * *

# spam messages

Since you have the basic chat code from the previous chapter, this one will be a lot easier. You just have to add this to the CSS box:
    
    
    #workskin .text1 {
      float: left;
      color: #000000;
      margin: 0.4em 1em;
      border-radius: 0.5em;
      padding: 0.25em 15px 0.25em 1em;
      background: #FFFFFF;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .reply1 {
      float: right;
      color: #000000;
      margin: 0.4em 1em;
      border-radius: 0.5em;
      padding: 0.25em 15px 0.25em 1em;
      background: #E1FFC7;
      max-width: 75%;
      clear: both;
      position: relative;
    }

Basically, this is the same with the **text** and **reply** code, but without the **before** part.

In "Work Text", you'll write these:
    
    
    <div class="phone">  
    <p class="messagebody">  
    <span class="avatar"></span>  
    <span class="header">Mom</span><br />  
    <span class="status">online</span><br />  
    <span class="reply">Mom</span><br />  
    <span class="reply1">Where are you?</span><br />  
    <span class="reply1">I'm home</span><br />  
    <span class="reply1">But the door's locked?</span><br />  
    <span class="text">Sorry</span><br />  
    <span class="text1">Forgot to tell you that I'm going to the supermarket</span><br />  
    <span class="text1">The key's in the masterbox</span><br />  
    <span class="reply">Ok</span><br />  
    </p>  
    </div>

Aaand, you'll get exactly like this:

Mom  
online  
Mom  
Where are you?  
I'm home  
But the door's locked?  
Sorry  
Forgot to tell you that I'm going to the supermarket  
The key's in the masterbox  
Ok

 

* * *

# bubble chat + time +check mark

You must recognize that WhatsApp has date written on top of the chat, time on the right side of every bubble chat, and check mark on every bubble chat that we sent, right? Like this:

Claire  
  
August 27, 2018  
Are you still mad at me?19:34         
Claire?20:03         
  
  
Yesterday  
Yes22:57  
  
  
Today Damn08:11         
Claire08:11         
It's been two days08:12         
YOU'RE OFF NOW?!08:12       

This is the most challenging coding I've ever made! But simply you just need to add this into your CSS box:
    
    
    #workskin .time {
      max-width: 100px;
      background: #D4EAF4;
      background-size: 100px;
      color: #8B9295;
      font-size: .6em;
      font-weight: bold;
      padding: .5em .5em;
      margin-top: .5em;
      margin-bottom: .5em;
      margin-left: auto;
      margin-right: auto;
      border-radius: 0.5em;
      text-align: center;
      text-transform: uppercase;
      display: table;
    }
    
    #workskin .textclock {
      font-size: 0.75em;
      color: #B7B7B7;
      margin-left: 1em;
      text-align: right;
    }
    
    #workskin .read {
      font-size: 0.75em;
      color: #B7B7B7;
      margin-left: 1em;
      text-align: right;
      background-image: url("https://s19.postimg.cc/ynt9jgn43/whatsapp_read_check_mark.png");
      background-repeat: no-repeat;
      background-size: 1.5em;
      background-position: right top;
    }
    
    #workskin .delivered {
      font-size: 0.75em;
      color: #B7B7B7;
      margin-left: 1em;
      text-align: right;
      background-image: url("https://s19.postimg.cc/f5ym3ixw3/whatsapp_delivered_message_check_mark.png");
      background-repeat: no-repeat;
      background-size: 1.5em;
      background-position: right top;
    }
    
    #workskin .pending {
      font-size: 0.75em;
      color: #B7B7B7;
      margin-left: 1em;
      text-align: right;
      background-image: url("https://s19.postimg.cc/5y6dmpo83/pending_whatsapp_check_mark.png");
      background-repeat: no-repeat;
      background-size: 1.3em;
      background-position: right top;
    }

The check mark is an image, so I add the URL by myself. If you have another way to make a check mark, please let me know!

I still put the check mark as the background image of the time, so after writing the time, you have to add seven spaces (&nbsp) in order to get the proportional position of the check mark. But again, if you have another solution, please let me know!

So, after adding those code into your CSS box, write in your "Work Skin" like this:
    
    
    <div class="phone">  
    <p class="messagebody"><span class="avatar"></span><span class="header">Claire</span><br />  
    <span class="status"> </span><br />  
    <span class="time">August 27, 2018</span><br />  
    <span class="reply">Are you still mad at me?<span class="read">19:34       </span></span><br />  
    <span class="reply1">Claire?<span class="read">20:03       </span></span><br />  
    <br /><br />  
    <span class="time">Yesterday</span><br />  
    <span class="text">Yes<span class="textclock">22:57</span></span><br />  
    <br /><br />  
    <span class="time">Today</span> <span class="reply">Damn<span class="delivered">08:11       </span></span><br />  
    <span class="reply1">Claire<span class="delivered">08:11       </span></span><br />  
    <span class="reply1">It's been two days<span class="pending">08:12       </span></span><br />  
    <span class="reply1">YOU'RE OFF NOW?!<span class="pending">08:12       </span></span></p></div>

And you'll get this!

Claire  
  
August 27, 2018  
Are you still mad at me?19:34         
Claire?20:03         
  
  
Yesterday  
Yes22:57  
  
  
Today Damn08:11         
Claire08:11         
It's been two days08:12         
YOU'RE OFF NOW?!08:12       

Unfortunately, I can't get this check mark good when you type two or more lines. If you write only one line, it'll do ok, but if you write more than one, it'll become like this:

 

 

 

 

I'm going to give my mother and father a super big hug if I'm able to survive from this ridiculous game!!!01:08       

... while we know WhatsApp's not like that.

If you have any solution, please let me know! I'll be so glad if I can fix this thing!

That's all I can give to you! Thank you so much for reading my tutorial! Please give comments and suggestion so this skin can get better! XD

**Happy writing!**


End file.
